<template>
	<view class="pages-box rel" v-if="detail.id">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :title="statusObj[detail.status].title" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		
		<!--退款信息-->
		<block v-if="detail.refund">
			<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg" >
				<view class="pt-md pb-md flex-between" v-if="detail.refund.refund_code">
					<text class="f-paragraph c-mini-title">退款编号</text>
					<view class="flex-center">
						<text class="f-desc c-icontext pr-sm">{{detail.refund.refund_code}}</text>
						<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.refund.refund_code,openType: 'copy'})"
						:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
					</view>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">申请退款金额</text>
					<text class="f-desc c-warning">￥{{detail.refund.apply_price}}</text>
				</view>
				<!-- 审核通过才有退款时间 -->
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款时间</text>
					<text class="f-desc c-icontext">{{$util.formatTime(detail.refund.refund_time*1000, '')}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">取消方式</text>
					<text class="f-desc c-icontext">{{detail.cancel_type == 1 ? '用户取消' : '后台取消'}}</text>
				</view>
				<view class="pt-md pb-md flex" v-if="detail.refund.content">
					<text class="f-paragraph c-mini-title">退款说明</text>
					<view class="flex-1 flex" style="justify-content: flex-end;">
						<text class="f-desc c-icontext max-500 ">{{detail.refund.content}}</text>
					</view>
				</view>
				<view class="pb-md flex" v-if="detail.refund.text">
					<text class="f-paragraph c-mini-title">退款详情描述</text>
					<view class="flex-1 flex" style="justify-content: flex-end;">
						<text class="f-desc c-icontext max-500 pre-wrap">{{detail.refund.text}}</text>
					</view>
				</view>
			</view>
			<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">售后状态</text>
					<text class="f-desc c-icontext">已退款</text>
				</view>
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款金额</text>
					<text class="f-desc c-warning">￥{{detail.refund.refund_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款方式</text>
					<text class="f-desc c-icontext">原路退回</text>
				</view>
				<view class="pt-md pb-md flex-between" v-if="detail.refund.status == 2">
					<text class="f-paragraph c-mini-title">退款状态</text>
					<text class="f-desc c-icontext">退款成功</text>
				</view>
			</view>
		</block>
		<view class="mt-md fill-base pd-lg radius-16 ml-md mr-md ">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单类型</text>
				<text class="f-desc c-icontext">标准订单</text>
				<!-- <text class="f-desc c-icontext">{{detail.order_type == 1 ? '上门服务' : '上门回收'}}</text> -->
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">预约时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.start_time*1000, 'YY-M-D h:m')}}</text>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg radius-16 ml-md mr-md ">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系人姓名</text>
				<text class="f-desc c-icontext">{{detail.address_info.user_name}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系电话</text>
				<text class="f-desc c-icontext">{{detail.address_info.mobile}}</text>
			</view>
			<view class="pt-md pb-md flex">
				<text class="f-paragraph c-mini-title">地址</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500" >{{detail.address_info.address + detail.address_info.address_info}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg flex-between radius-16 ml-md mr-md" v-for="(item,index) in detail.order_goods" :key="index">
			<image :src="item.image" mode="aspectFill" class="radius-16 order-image"></image>
			<view class="flex-1 pl-md">
				<view class="f-title text-bold">{{item.name}}</view>
				<view class="f-caption c-caption pt-sm pb-sm">{{item.title}}</view>
				<view class=" c-warning f-paragraph">￥{{item.price}}</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg radius-16 ml-md mr-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.order_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.order_code,openType: 'copy'})"
					:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">下单时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.create_time*1000, '')}}</text>
			</view>
			<view class="pt-md pb-md flex" v-if="detail.text">
				<text class="f-paragraph c-mini-title">订单备注</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 pre-wrap">{{detail.text}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm" v-if="detail.order_pay_img">
			<view class="f-paragraph c-mini-title pt-md pb-md">上门回收付款凭证</view>
			<view class="">
				<upload :imagelist="detail.order_pay_img" text="上传图片" :imageSee="true"
					:imgsize="detail.order_pay_img.length" :pictureSize="5">
				</upload>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm" v-if="detail.order_check_img">
			<view class="f-paragraph c-mini-title pt-md pb-md">服务完成凭证</view>
			<view class="">
				<upload :imagelist="detail.order_check_img" text="上传图片" :imageSee="true"
					:imgsize="detail.order_check_img.length" :pictureSize="5">
				</upload>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm radius-16 ml-md mr-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付方式</text>
				<text class="f-desc c-icontext">{{payModel[detail.pay_model]}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">上门费</text>
				<text class="f-desc c-warning">￥{{detail.door_money || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务费</text>
				<text class="f-desc c-warning text-bold">¥{{detail.price || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付金额</text>
				<text class="f-desc c-warning text-bold">¥{{Number((detail.price*1 + detail.door_money*1).toFixed(2))}}</text>
			</view>
		</view>
		<!--补差价-->
		<block v-if="detail.add_price_list">
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<block v-for="(item,index) in detail.add_price_list" :key="index">
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补差价订单编号</text>
						<view class="flex-center flex-1 pl-lg">
							<text class="f-desc c-icontext pr-sm flex-1" style="word-break:break-all">{{item.order_code}}</text>
							<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: item.order_code,openType: 'copy'})"
							:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
						</view>
					</view>
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补单时间</text>
						<text class="f-desc c-icontext">{{$util.formatTime(item.create_time*1000, '')}}</text>
					</view>
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补单类型</text>
						<text class="f-desc c-icontext">{{item.text}}</text>
					</view>
					<view class="pt-md pb-md flex-between" v-if="item.text_info">
						<text class="f-paragraph c-mini-title">补单备注</text>
						<text class="f-desc c-icontext">{{item.text_info}}</text>
					</view>
				</block>
			</view>
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">补单支付方式</text>
					<text class="f-desc c-icontext">微信支付</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付金额</text>
					<text class="f-desc c-warning">￥{{detail.add_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付状态</text>
					<text class="f-desc c-icontext">支付成功</text>
				</view>
			</view>
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<view class="pt-md pb-md f-title text-bold c-title">支付明细</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">订单金额总计</text>
					<text class="f-desc c-warning text-bold">￥{{Number((detail.price*1 + detail.door_money*1).toFixed(2))}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">补单金额总计</text>
					<text class="f-desc c-warning text-bold">￥{{detail.add_price_list[0].pay_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付金额总计</text>
					<text class="f-title c-warning text-bold">￥{{Number((detail.add_price_list[0].pay_price*1 + detail.price*1 + detail.door_money*1).toFixed(2))}}</text>
				</view>
			</view>
		</block>
		
		<uni-popup ref="order_box" type="center" :custom="true">
			<view class="order-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<block v-if="form.order_type == 2">
					<view class="f-title flex-center h-80 text-bold rel">服务完成
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph text-bold pb-lg pt-lg">上传付款凭证</view>
					<view class="pb-lg flex-center">
						<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.image" imgtype="image" text="上传图片" :imgsize="9"
							:pictureSize="5" imgclass="mini">
						</upload>
					</view>
					<view class="flex-center pb-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder('service')">服务完成</view>
					</view>
				</block>
				<block v-else>
					<view class="f-title flex-center h-80 text-bold rel">验收
						<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
					</view>
					<view class="f-paragraph text-bold pb-lg pt-lg">输入验收码</view>
					<view class="pb-lg flex-center">
						<view class="">
							<xt-verify-code v-model="form.check_code" :size="4" cursorColor="#fff"></xt-verify-code>
						</view>
					</view>
					<block v-if="configInfo.coach_end_order_upload">
						<view class="f-paragraph pb-lg pt-lg">请上传完成图片</view>
						<view class="pb-lg flex-center">
							<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.order_check_img" imgtype="order_check_img" text="上传图片" :imgsize="9"
								:pictureSize="5" imgclass="mini">
							</upload>
						</view>
					</block>
					<view class="flex-center pb-lg pt-lg">
						<view class="radius-10 service-btn flex-center f-desc"
						:style="{color: `#fff`, background: primaryColor}" 
						@tap.stop="changeOrder('service')">确定</view>
					</view>
				</block>
			</view>
		</uni-popup>
		<view class="space-max-footer"></view>
		<fixed position="bottom" :zIndex="99" v-if="[3,4,5,6].includes(detail.status)">
			<view class="fill-base pl-lg pr-lg b-1px-t">
				<view class="flex-y-center pt-md pb-md" style="justify-content: flex-end;">
					<!-- <view class="radius-10 order-btn flex-center f-desc c-base fill-warning">拒绝接单</view> -->
					<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
					:style="{border: `1px solid ${primaryColor}`, color: primaryColor}" v-if="[6].includes(detail.status) && !detail.add_price_list && detail.order_type == 1"
					@tap.stop="setDifference">{{detail.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
					<view v-if="detail.status == 3 && detail.can_cancel == 1" class="radius-10 order-btn flex-center f-desc ml-md" 
					style="border: 1px solid #D1D1D1;" @tap="changeOrder('cancel')">取消订单</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md" 
					:style="{color: `#fff`, background: primaryColor}" @tap="changeOrder('')">{{statusButton[detail.status]}}</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>
		<!-- #ifdef APP-PLUS -->
			<openAuth type="phone" ref="app_check_item"></openAuth>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	import xtVerifyCode from "@/components/xt-verify-code"
	import openAuth from "@/components/open-auth.vue"
	
	export default {
		components: {
			tabbar,
			xtVerifyCode,
			openAuth
		},
		data() {
			return {
				detail: {},
				options: {},
				payModel: {
					1: '微信支付'
				},
				param: {
					id: '',
					status: 3 , //2取消订单（已接单变成待接单状态） 3接单 4出发 5到达 6开始服务 7验证 8完成
				},
				statusObj: {
					'-2': {title: '已取消', color: '#FF2404'},
					'-1': {title: '已取消', color: '#FF2404'},
					3: {title: '待上门', color: '#F36905'},
					4: {title: '已出发', color: '#F36905'},
					5: {title: '待开始', color: '#19C865'},
					6: {title: '服务中', color: '#19C865'},
					7: {title: '服务完成', color: '#19C865'},
					8: {title: '订单完成', color: '#999999'}
				},
				statusButton: {
					3: '马上出发',
					4: '已到达',
					5: '开始服务',
					6: '服务完成',
					7: '订单完成'
				},
				form: {
					image: [],
					id: '',
					status: '',
					order_type: 2,
					check_code: '',
					order_check_img: []
				},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.param.id = options.id
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo','getCoachInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
				if(!this.coachInfo.id || refresh){
					await this.getCoachInfo()
				}
				this.getDetail()
			},
			async getDetail(){
				let data = await this.$api.order.orderInfo(this.options)
				if(data.order_pay_img){
					data.order_pay_img = data.order_pay_img.split(',').map(item => {
						return {path: item}
					})
				}
				if(data.order_check_img){
					data.order_check_img = data.order_check_img.split(',').map(item => {
						return {path: item}
					})
				}
				this.detail = data
				if( data.order_type == 1){
					this.statusButton[6] = '输入验收码'
				}
				this.$util.hideAll()
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			// 补差价
			setDifference(){
				let {
					id,
					is_add = 0
				} = this.detail
				this.$util.goUrl({url: `/demand/pages/order/difference?id=${id}&type=1&is_add=${is_add}`})
			},
			async changeOrder(type = ''){
				let {
					id,
					status,
					order_type,
					is_add = 0
				} = this.detail
				let param = {
					id,
					status
				}
				
				if(status == 3){ // 待上门
					param.status = 4
				}else if(status == 4){ // 已出发
					param.status = 5
				}else if(status == 5){ // 待开始
					param.status = 6
				}else if(status == 6){ // 待验收
					this.form.order_type = order_type
					if(order_type == 2 && !type){ // 需要上传图片  上门回收
						this.form.id = id
						this.form.status = 7
						this.$refs.order_box.open()
						return
					}else if(order_type == 1 && !type){
						if(is_add == 1){
							this.$util.showToast({
								title: '补完差价才能输入验收码'
							})
							return
						}
						this.form.id = id
						this.form.status = 7
						this.$refs.order_box.open()
						return
					}
				}
				if(type == 'cancel'){
					// param.status = 2
					// let [res_del, {
					// 	confirm
					// }] = await uni.showModal({
					// 	content: `请确认是否要取消订单`,
					// })
					// if (!confirm) return;
					// this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					this.callPhone(this.coachInfo.service_tel)
					return
				}
				if(type == 'service'){
					let form = this.$util.deepCopy(this.form)
					if(form.order_type == 2){
						if(form.image.length == 0){
							this.$util.showToast({
								title: '请上传付款凭证'
							})
							return
						}
						param.order_pay_img = form.image.map(item => {
							return item.path
						})
					}else{
						let {
							check_code = ''
						} = form
						if(check_code.length != 4){
							this.$util.showToast({
								title: '请输入验收码'
							})
							return
						}
						if(form.order_check_img.length > 0){
							param.order_check_img = form.order_check_img.map(item => {
								return item.path
							})
						}
						param.check_code = check_code
						param.status = 7
					}
					
				}
				this.$util.showLoading()
				await this.$api.order.updateOrder(param)
				if(type == 'service'){
					this.$refs.order_box.close()
				}
				this.$util.hideAll()
				this.$util.showToast({
					title: param.status == 2 ? '取消成功' : '操作成功'
				})
				this.getDetail()
				setTimeout(()=>{
					this.$util.back()
					if(type == 'cancel'){
						this.$util.goUrl({url: 1 ,openType: 'navigateBack'})
					}
				},1500)
			},
			async callPhone(url){
				// #ifdef APP-PLUS
				let [,data] = await uni.getSystemInfo()
				if(data.platform !== 'ios'){
					this.$util.isCheckAuth({type: 'phone'}).then(res => {
						if(res){
							this.$refs.app_check_item.open()
						}
					})
				}
				// #endif
				uni.makePhoneCall({
					phoneNumber: url,
					success:(res)=>{
						// #ifdef APP-PLUS
						this.$refs.app_check_item.close()
						// #endif
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						this.$refs.app_check_item.close()
						// #endif
					}
				})
			}
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.order-image{
			width: 160rpx;
			height: 160rpx;
		}
		.order-btn{
			min-width: 152rpx;
			height: 62rpx;
		}
		.copy-btn{
			border-radius: 2px;
		}
		.order-box{
			width: 690rpx;
			.service-btn{
				width: 222rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
		}
	}
</style>
